<script lang="ts" setup>
import Api from '~/api'
import { OrderModel } from '~/model/OrderModel'

// import { OrderTemplateModel } from '~/model/OrderTemplateModel'

const router = useRouter()
const orders = ref([] as OrderModel[])
// const templates = ref([] as OrderTemplateModel[])

onMounted(() => {
  // Api.OrderTemplate.getAll()
  //   .then((res) => {
  //     templates.value = res
  //   })
  Api.Order.getAll()
    .then((res) => {
      orders.value = res.slice(0, 16)
    })
})

function createNew() {
  router.replace('/orders/edit?template=0')
}

function fromExist(id: number) {
  router.replace(`/orders/edit?copy=${id}`)
}

// function orderDisplay(order: OrderModel): string {
//   const name = order.consumer!.name
//   const item = order.items[0].name
//   const quantity = order.items[0].quantity
//   const unit = order.items[0].unit
//   return `${name}\n${item}\n${quantity}${unit}`
// }
</script>

<template>
  <div p4>
    <div
      class="order-card-new"
      @click="createNew"
    >
      新建空白订单
    </div>

    <div b-t="1 solid gray" mb2 pt2 text-center text-size-5>
      再来一单
    </div>
    <div flex flex-row flex-wrap>
      <div
        v-for="item in orders"
        :key="item.id"
        class="order-card"
        @click="fromExist(item.id)"
      >
        <span>{{ item.consumer!.name }}</span><br>
        <span class="sub">{{ item.items[0].material?.name }}({{ item.items[0].material?.specification }})</span><br>
        <span class="sub">{{ `${item.items[0].quantity}${item.items[0].material?.unit}` }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order-card-new {
  background-color: white;
  color: black;
  width: 100%;
  height: 12rem;
  border-radius: 0.25rem;
  white-space: pre-line;
  margin-bottom: 0.5rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.order-card {
  background-color: white;
  color: black;
  width: calc(50% - 4px);
  border-radius: 0.25rem;
  white-space: pre-line;
  margin-bottom: 0.5rem;
  padding: 1rem;
  &:nth-child(2n+1) {
    margin-right: 8px;
  }
  box-shadow: 2px 2px 4px #aaaaaaaa;

  .sub {
    font-size: 0.75em;
    color: #000000aa;
  }
}
</style>

<route lang="yaml">
meta:
  title: 创建订单
</route>
